<template>
	<view class="tabbar-container" :style="{'height':tabBarHeight+'px'}">
		<u-tabbar
			:fixed="false"
			:value="data.currentTab"
			activeColor="#9BCDD2"
			inactive-color="#000000"
		>
			<u-tabbar-item
				v-for="(item,index) in tabBarList[data.currentIndex]"
				:key="index"
				:text="item.text"
				:name="item.name"
				@click="handleTap(item)"
			>
				<image class="bar_img" slot='inactive-icon' :src="item.iconPath"></image>
				<image class="bar_img" slot='active-icon' :src="item.selectedIconPath"></image>
			</u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import {reactive,onMounted} from 'vue'
	import {onShow} from '@dcloudio/uni-app'
	export default {
		name:"tabbar",
		setup(props,context){
			let data = reactive({
				currentTab:'',
				currentIndex:0
			})
			
			let systemInfo = uni.getSystemInfoSync()
			let tabBarHeight = systemInfo.screenHeight - systemInfo.safeAreaBottom
			
			onShow(()=>{
				let t = uni.getStorageSync('role')
				if(t<3){
					data.currentIndex = 0
				}else if(t == 3){
					data.currentIndex = 1
				}else if(t == 4){
					data.currentIndex = 2
				}
				data.currentTab = props.currentTab
			})
			
			onMounted(()=>{
				let t = uni.getStorageSync('role')
				if(!t||t<3){
					data.currentIndex = 0
				}else if(t == 3){
					data.currentIndex = 1
				}else if(t == 4){
					data.currentIndex = 2
				}
				data.currentTab = props.currentTab
			})
			
			let tabBarList = [
				[
					{
						"pagePath": "/pages/index/index",
						"iconPath": "../../static/tabBar/product.png",
						"selectedIconPath": "../../static/tabBar/product_fill.png",
						"text": '首页',
						"name": 'home'
					},
					// {
					// 	"pagePath": "/pages/fruit/fruit",
					// 	"iconPath": "../../static/tabBar/fruit.png",
					// 	"selectedIconPath": "../../static/tabBar/fruit_fill.png",
					// 	"text": '果切',
					// 	"name": 'fruit'
					// },
					{
						"pagePath": "/pages/me/me",
						"iconPath": "../../static/tabBar/me.png",
						"selectedIconPath": "../../static/tabBar/me_fill.png",
						"text": "我的",
						"name": 'me'
					},
				],
				[
					{
						"pagePath": "/pages/fruit/fruit-order",
						"iconPath": "../../static/tabBar/shop.png",
						"selectedIconPath": "../../static/tabBar/shop_fill.png",
						"text": '接单',
						"name": 'shop'
					},
					{
						"pagePath": "/pages/me/me",
						"iconPath": "../../static/tabBar/me.png",
						"selectedIconPath": "../../static/tabBar/me_fill.png",
						"text": "我的",
						"name": 'me'
					}
				],
				[
					{
						"pagePath": "/pages/index/index",
						"iconPath": "../../static/tabBar/product.png",
						"selectedIconPath": "../../static/tabBar/product_fill.png",
						"text": '骑手接单',
						"name": 'rider'
					},
					{
						"pagePath": "/pages/me/me",
						"iconPath": "../../static/tabBar/me.png",
						"selectedIconPath": "../../static/tabBar/me_fill.png",
						"text": "我的",
						"name": 'me'
					}
				]
			]
			
			function handleTap(item){
				// let t = uni.getStorageSync('role')
				// if(t<3){
				// 	data.currentIndex = 0
				// }else if(t == 3){
				// 	data.currentIndex = 1
				// }else if(t == 4){
				// 	data.currentIndex = 2
				// }
				// console.log(t)
				// console.log(item)
				uni.switchTab({
					url:item.pagePath
				})
			}
			
			return {
				data,
				tabBarList,
				handleTap,
				tabBarHeight
			}
		}
	}
</script>

<style scoped>
	.bar_img{
		width: 54rpx;
		height: 54rpx;
	}
	
	.tabbar-container{
		/* align-items: center; */
		width: 750rpx;
		/* background-color: aqua; */
		position: fixed;
		bottom: 0;
		padding-bottom: calc(env(safe-area-inset-bottom) - 5rpx); 
		padding-top: 5rpx;
		background-color: #fff;
		border-top: 2rpx solid #bbbbbb;
	}
</style>